<template>
  <div class="refine_socreate">
    <h2 class="titleblue">{{title}}</h2>
    <div class="contant">
      <el-form ref="form" :model="form" label-width="100px">
        <el-row>
          <el-col :span="24">
            <div class="grid-content">
              <el-form-item label="机构名称">
                <el-input class="select-width-220" v-model="form.name" placeholder="请输入内容"></el-input>
              </el-form-item>
            </div>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <div class="grid-content">
              <el-form-item label="所属上级">
                <el-select v-if='level!=1' :disabled="detail=='edit'?true:false" v-model="form.pid1"
                           class="select-width-220" @change="selectLevelone($event)" value-key="id">
                  <el-option
                    v-for="item in pidOption1"
                    :key="item.id"
                    :label="item.name"
                    :value="item">
                  </el-option>
                </el-select>
                <el-select v-if='level==3||!level' :disabled="detail=='edit'?true:false" v-model="form.pid2"
                           class="select-width-220 margin-top-20">
                  <el-option
                    v-for="item in pidOption2"
                    :key="item.value"
                    :label="item.name"
                    :value="item.id">
                  </el-option>
                </el-select>
              </el-form-item>
            </div>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <div class="grid-content">
              <el-form-item label="机构纬度">
                <Location type="longTime" :data.sync="form.longitude" :readonly='readread'
                          :update="dialog"></Location>
                <!--<el-input class="select-width-60" v-model="lat.latitude1"></el-input>-->
                <!--<sup>°</sup>-->
                <!--<el-input class="select-width-60" v-model="lat.latitude2"></el-input>-->
                <!--<sup>'</sup>-->
                <!--<el-input class="select-width-60" v-model="lat.latitude3"></el-input>-->
                <!--<sup>"</sup>-->
                <!-- <el-select v-model="lat.latitude4" placeholder="" class="select-width-60">
                                    <el-option label="N" value="N"></el-option>
                                    <el-option label="S" value="S"></el-option>
                                </el-select> -->
              </el-form-item>
            </div>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <div class="grid-content">
              <el-form-item label="机构经度">
                <Location type="latTime" :data.sync="form.latitude" :readonly='readread'
                          :update="dialog"></Location>
                <!--<el-input class="select-width-60" v-model="lon.longitude1"></el-input>-->
                <!--<sup>°</sup>-->
                <!--<el-input class="select-width-60" v-model="lon.longitude2"></el-input>-->
                <!--<sup>'</sup>-->
                <!--<el-input class="select-width-60" v-model="lon.longitude3"></el-input>-->
                <!--<sup>"</sup>-->
                <!-- <el-select v-model="lon.longitude4" placeholder="" class="select-width-60">
                                    <el-option label="E" value="E"></el-option>
                                    <el-option label="W" value="W"></el-option>
                                </el-select> -->
              </el-form-item>
            </div>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <div class="grid-content">
              <el-form-item label="机构电话">
                <el-input class="select-width-220" v-model="form.oneph1" placeholder="请输入内容"></el-input>
              </el-form-item>
            </div>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <div class="grid-content">
              <el-form-item label="机构电话">
                <el-input class="select-width-220" v-model="form.oneph2" placeholder="请输入内容"></el-input>
              </el-form-item>
            </div>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <div class="grid-content">
              <el-form-item label="机构电话">
                <el-input class="select-width-220" v-model="form.oneph3" placeholder="请输入内容"></el-input>
              </el-form-item>
            </div>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <div class="grid-content">
              <el-form-item label="传真">
                <el-input class="select-width-220" v-model="form.oneph4" placeholder="请输入内容"></el-input>
              </el-form-item>
            </div>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <div class="grid-content">
              <el-form-item label="机构地址">
                <el-input class="select-width-220" v-model="form.oneph5" placeholder="请输入内容"></el-input>
              </el-form-item>
            </div>
          </el-col>
        </el-row>
      </el-form>
      <div class="footerbtn">
        <el-button class="sure" @click="del" v-if='cuid==1&&id&&level!=1'>删除</el-button>
        <el-button class="sure" @click="sure">确定</el-button>
        <el-button class="cancel" @click="cancel">取消</el-button>
      </div>
    </div>
  </div>
</template>

<script>
  import Location from '@/components/common/Location.vue'
  import sosOrgService from '@/services/SosOrgService'

  export default {
    name: 'CreateSos',
    props: ['id', 'detail'],
    components: {
      Location
    },
    data: function () {
      return {
        form: {
          name: '',
          pid1: '',
          pid2: '',
          oneph1: '',
          oneph2: '',
          oneph3: '',
            oneph4: '',
            oneph5: '',
          latitude: '',
          longitude: '',
        },
        pidOption1: [],
        pidOption2: [],
        sos: [],
        title: '新建搜救机构',
        lat: {
          latitude1: '',
          latitude2: '',
          latitude3: '',
          latitude4: 'N',
        },
        lon: {
          longitude1: '',
          longitude2: '',
          longitude3: '',
          longitude4: 'E',
        },
        level: '',
        cuid: '',
        dialog: false,
        readread: false,
        parentId1: null,
        parentId2: null,
        detailId: null,
        createTime: null
      }
    },
    created () {
      if (this.detail == 'create') {
        this.title = '新建搜救机构'

      } else if (this.detail == 'edit') {
        this.title = '编辑搜救机构'

      }
      this.pidOption1 = this.$route.params.sos
      if (this.$route.params.data) {
        this.showDetail()
      }
    },
    methods: {
      showDetail () {
        var data = this.$route.params.data
        if (data.level == 2) {
          this.pidOption1.forEach(item => {
            if (item.id == data.parentId) {
              this.form.pid1 = item.name
            }
          })
        } else if (data.level == 3) {
          this.pidOption1.forEach(item => {
            item.subset.forEach(element => {
              if(element.id == data.parentId){
                this.form.pid1 = item.name
                this.parentId1 = item.id
                this.form.pid2 = element.name
                this.parentId2 = element.id
              }
            })
          })
        }
        for (let key in data) {
          if (key == 'id') {
            this.detailId = data[key]
          } else if (key == 'createTime') {
            this.createTime = data[key]
          } else if (key == 'workPhone' && data[key]) {
            let phone = data[key].split(',')
            this.form.oneph1 = phone[0] ? phone[0] : ''
            this.form.oneph2 = phone[1] ? phone[1] : ''
            this.form.oneph3 = phone[2] ? phone[2] : ''
              this.form.oneph4 = phone[3] ? phone[3] : ''
              this.form.oneph5 = phone[4] ? phone[4] : ''
          } else {
            this.form[key] = data[key]
          }
        }
      },
      selectLevelone (val) {
        this.pidOption2 = []
        this.form.pid2 = ''
        this.pidOption2 = val.subset
        // for (var i of this.sos) {
        //   if (i.d_id == id) {
        //     for (var j of i.son) {
        //       this.pidOption2.push({
        //         value: j.d_id,
        //         label: j.name
        //       })
        //     }
        //   }
        // }
      },
      close () {
        this.adddialog = false
        this.id = ''
      },
      del () {

      },
      sure () {
        if (!this.form.name) {
          this.$alert('请填写搜救机构的名字', '提示')
          return false
        }
        if (!this.form.pid1) {
          this.$alert('请选择要增加机构的上级机构', '提示')
          return false
        }
        if (!this.form.oneph1 && !this.form.oneph2 && !this.form.oneph3) {
          this.$alert('请至少填写一个机构电话', '提示')
          return false
        }
        let obj = {
          latitude: this.form.latitude,
          level: this.form.pid2 ? 3 : 2,
          longitude: this.form.longitude,
          name: this.form.name,
          parentId: this.form.pid2 ? this.form.pid2 : this.form.pid1.id ? this.form.pid1.id : '',
          sosFlyDevices: null,
          workPhone: `${this.form.oneph1 ? this.form.oneph1 : ''}${this.form.oneph2 ? `,${this.form.oneph2}` : ''}${this.form.oneph3 ? `,${this.form.oneph3}` : ''}${this.form.oneph4 ? `,${this.form.oneph4}` : ''}${this.form.oneph5 ? `,${this.form.oneph5}` : ''}`
        }
        if (this.detail == 'edit') {
          obj.id = this.detailId
          obj.createTime = this.createTime
          obj.parentId = this.parentId2 ? this.parentId2 : this.parentId1 ? this.parentId1 : ''
          sosOrgService.update(obj).then(res => {

            if (res) {
              this.$emit('close')
              this.$message({
                type: 'success',
                message: '修改成功!'
              })
            }
          })
        } else {
          sosOrgService.create(obj).then(res => {

            if (res) {
              this.$emit('close')
              this.$message({
                type: 'success',
                message: '创建成功!'
              })
            }
          })
        }
      },
      cancel () {
        this.$emit('close')
      },
    }
  }

</script>

<style scoped lang="scss">
  .refine_socreate {
    width: 100%;
    display: inline-block;
    padding-bottom: 50px;

    .el-form {
      width: 460px;
      margin: 0 auto;
    }

    .margin-top-20 {
      margin-top: 20px;
    }

    .footerbtn {
      margin-top: 50px;
    }

    .grid-content sup {
      font-size: 16px;
    }
  }
</style>
